<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        刷新
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-plus" @click="handleCreate">
        新增
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="名称" align="center" min-width="160">
        <template slot-scope="{row}">
          <span>{{ row.appName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排除年龄" min-width="200" align="center">
        <template slot-scope="{row}">
          <el-tag v-for="(item,index) in row.ageList" :key="index" style="margin:3px;">{{ item }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="排除GPS所在地" min-width="200" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" @click="gpssee(row,'gps')">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="排除户籍所在地" min-width="200" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" @click="idCardsee(row,'idCard')">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="排除手机号归属地" min-width="200" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" @click="phonesee(row,'phone')">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200" align="center">
        <template slot-scope="{row}">
          <el-button @click="handleEdit(row)">
            编辑
          </el-button>
        </template>
      </el-table-column>


    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getLoanAppFilterList"
    />

    <el-dialog title="规则详细" :visible.sync="seedialog">
      <el-form ref="dataForm" label-position="left" label-width="90px" style="margin-left:50px;">

        <div v-if="!edit" style="width:98%">
          <span v-for="(item,index) in adminDto" :key="index" style="display:inline-block;padding:5px 10px;">{{ item }}</span>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="seedialog = false">
          关闭
        </el-button>
      </div>
    </el-dialog>


    <el-dialog title="修改规则" :visible.sync="editdialog">
      <p style="color:red">请按照已有格式修改，不然规则可能不会生效，省市只用输名称，不用带“省，市”,用英文逗号和短横线分割</p>
      <el-form ref="dataForm" :model="ruleDto" label-position="left" label-width="130px">
        <el-form-item label="年龄(不排除边界)">
          <el-input v-model="ruleDto.age" />
        </el-form-item>
        <el-form-item label="GPS">
          <textarea
            v-model="ruleDto.gps"
            class="textarea"
          />
        </el-form-item>
        <el-form-item label="户籍">
          <textarea
            v-model="ruleDto.idCard"
            class="textarea"
          />
        </el-form-item>
        <el-form-item label="手机号归属地">
          <textarea
            v-model="ruleDto.phone"
            class="textarea"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editdialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="handlesaveRule()">
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增" :visible.sync="adddialog">
      <el-form ref="dataForm" :rules="rules" :model="newDto" label-position="left" label-width="90px" style="width: 400px; margin-left:50px;">


        <el-form-item label="App">
          <el-select v-model="newDto.appId" clearable placeholder="请选择" style="width: 150px;" class="filter-item" readonly="readonly">
            <el-option v-for="(item,index) in appoptions" :key="index" :label="item.appName" :value="item.appId" />
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="createData()">
          确认
        </el-button>
      </div>
    </el-dialog>



    <el-dialog title="验证" :visible.sync="qrdialog">
      <div ref="qrCodeUrl" class="qrcode" />
      <p class="qrcode-content">请扫码验证</p>

    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'
import QRCode from 'qrcodejs2'
import { getLoanAppFilterList, updateLoanAppFilter, createFilter } from '@/api/user'
import { getLoanAppList } from '@/api/sys'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
export default {
  name: 'SmallWin',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      newDto: {
        appId: undefined
      },
      interval: {},
      edit: false,
      text: '',
      ruleDto: {
        id: undefined,
        appName: '',
        age: '',
        gps: '',
        idCard: '',
        phone: ''
      },
      tableData: [],
      editdialog: false,
      seedialog: false,
      qrdialog: false,
      adminDto: [],
      total: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        phone: ''
      },
      times: [],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '用户详情',
        create: '新增'
      },
      dialogPvVisible: false,
      downloadLoading: false,
      listLoading: false,
      optionsCopy: [],
      options: [],
      appoptions: [],
      value: '',
      totalData: {},
      adddialog: false
    }
  },
  created() {
    this.getLoanAppFilterList()
    this.getLoanAppList()
  },
  methods: {
    handleCreate() {
      this.adddialog = true
    },
    createData() {
      createFilter(this.newDto).then(res => {
        if (res.data.code === 200) {
          this.$notify({
            title: 'Success',
            message: 'Created Successfully',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    async getLoanAppList() {
      const res = await getLoanAppList()
      try {
        res.data.data.forEach(element => {
          this.appoptions.push(element)
        })
      } catch (error) {
        console.log(error)
      }
    },
    handleEdit(row) {
      // this.ruleDto = row
      this.ruleDto.id = row.id
      this.ruleDto.appName = row.appName
      this.ruleDto.age = row.ageList + ''
      this.ruleDto.gps = row.gpsList + ''
      this.ruleDto.idCard = row.idCardList + ''
      this.ruleDto.phone = row.phoneList + ''
      this.editdialog = true
    },
    handlesaveRule() {
      this.qrdialog = true
      if (this.$refs.qrCodeUrl !== undefined) {
        window.clearInterval(this.interval)
        const childs = this.$refs.qrCodeUrl.childNodes
        for (var i = childs.length - 1; i >= 0; i--) {
          this.$refs.qrCodeUrl.removeChild(childs[i])
        }
      }
      this.creatQrCode()
    },
    saveRule() {
      this.ruleDto.ageList = ''
      this.ruleDto.gpsList = ''
      this.ruleDto.idCardList = ''
      this.ruleDto.phoneList = ''
      this.ruleDto.qrCode = this.text

      updateLoanAppFilter(this.ruleDto).then(res => {
        if (res.data.code === 200) {
          this.editdialog = false
          this.qrdialog = false
          this.ruleDto = {
            id: undefined,
            appName: '',
            age: '',
            gps: '',
            idCard: '',
            phone: '' }
          this.getLoanAppFilterList()
        } else {
          console.log('error')
        }
      })
    },
    creatQrCode() {
      axios.post('https://tech.hzywkj.net//qrCode/getQRCodeWithLogo',
        { channelCode: '3' },
        { headers: { 'Content-Type': 'application/json' }}).then(res => {
        if (res.data.data) {
          this.text = res.data.data
          var text = this.text
          new QRCode(this.$refs.qrCodeUrl, {
            text: text,
            width: 200,
            height: 200,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          })
        }
        this.check()
      })
    },
    handleFilter() {
      this.listQuery.current = 1
      if (this.times == null) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else if (this.times.length === 0) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else {
        this.listQuery.endTime = this.times[1]
        this.listQuery.startTime = this.times[0]
      }
      this.telesalesLoan(this.orderReqDto)
    },
    check() {
      this.interval = window.setInterval(this.result, 500)
    },
    result() {
      if (this.i === 120) {
        alert('扫码结果获取失败,请重新扫码')
        // 重新获取码
        this.i = 0
        window.clearInterval(this.interval)
        window.location.reload()
        return
      }
      this.i++
      var that = this
      axios.post('https://tech.hzywkj.net/qrCode/getH5QRCode',
        { qrUrl: that.text },
        { headers: { 'Content-Type': 'application/json' }}).then(res => {
        // console.log('res=>', res)
        if (res.data) {
          if (res.data.code === 1) {
            console.log(res.data.msg)
          } else if (res.data.code === 2) {
            // todo 跳转正式登录
            // console.log(res.data.msg)
            window.clearInterval(that.interval)
            this.saveRule()
          } else if (res.data.code === 3) {
            console.log(res.data.msg)
          } else if (res.data.code === 4) {
            console.log(res.data.msg)
          } else {
            console.log(res.data.msg)
          }
        }
      })
    },
    gpssee(row) {
      this.seedialog = true
      this.adminDto = row.gpsList
    },
    idCardsee(row) {
      this.seedialog = true
      this.adminDto = row.idCardList
    },
    phonesee(row) {
      this.seedialog = true
      this.adminDto = row.phoneList
    },
    dataFilter(val) {
      this.value = val
      if (val) { // val存在
        this.options = this.optionsCopy.filter((item) => {
          if (!!~item.channel_name.indexOf(val) || !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.options = this.optionsCopy
      }
    },
    // 获取用户列表
    async getLoanAppFilterList() {
      this.listLoading = true
      const res = await getLoanAppFilterList(this.listQuery)
      this.tableData = res.data.data
      this.listLoading = false
    }
  }
}
</script>

<style scoped>
.pic{
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color:rgb(35, 248, 124)
}
.fail{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name{
  margin-left: 50px;
  margin-top: 10px;
  color:rgb(0, 0, 0);
}
.title{
  margin-top: 0px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
  border-bottom: 1px dashed #304156;
  padding-bottom: 10px;
}
.box{
  margin-top: 10px;
  width: 100%;
  border: solid #304156 1px;
  padding: 20px 10px;
  border-radius: 10px;
}
.nick{
  font-size: 30px;
  font-weight: 600;
  border-bottom: solid #d6d6d6 2px;
  padding-bottom: 10px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.textarea{
  width:99%;
  height:200px;
  border-radius:4px;
  line-height: 22px;
  letter-spacing: 1px;
}
.qrcode{
  margin: 0 auto;
  width: 200px;
}
.qrcode-content{
  text-align: center;
  margin-top: 40px;
  font-size: 20px;
}
</style>
